<script setup>
import { reactive } from "vue";
import { ref } from "vue";
import { defineEmits } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();

// 登录函数
const onLogin = () => {
  console.log("submit!");
};

const jumpTo = (path) => {
  router.push({ path });
};

const personLogin = async () => {
  const info = JSON.parse(localStorage.getItem("info"));

  try {
    const res = await axios.post(
      `${apiUrl}/user/update`,
      { is_first: 1, group_id: 5 },
      {
        headers: {
          Authorization: `Bearer ${getToken()}`, // 修正了拼写错误
        },
      }
    );
    jumpTo("/person");
  } catch (e) {
    console.error(e); // 打印错误信息
    throw e; // 抛出错误，让调用者可以捕获
  }
};

const emit = defineEmits(["changeLoginType"]);
// 修改登录方式
const changeLoginType = (type) => {
  emit("changeLoginType", type);
};
</script>

<template>
  <div class="loginBox">
    <div class="boxBg">
      <div class="title">{{ $t("loginRegist.selType") }}</div>

      <div class="userType">
        <div class="person item cur" @click="personLogin()">
          <div class="imgBox">
            <img src="../../../assets/img/user.png" />
          </div>

          <p>{{ $t("loginRegist.person") }}</p>
        </div>
        <div class="company item cur" @click="changeLoginType('regist')">
          <div class="imgBox">
            <img src="../../../assets/img/company.png" />
          </div>
          <p>{{ $t("loginRegist.company") }}</p>
        </div>
      </div>
      <div class="formItem" style="visibility: hidden">
        <el-button type="primary" class="loginBtn" @click="changeLoginType('quik')">{{
          $t("loginRegist.logBtn")
        }}</el-button>

        <div class="changeTypeBtn" @click="changeLoginType('password')">
          {{ $t("loginRegist.passwordLogin") }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.loginBox {
  display: flex;
  justify-content: end;

  .boxBg {
    width: 400px;
    background-color: #fff;
    padding: 30px 40px;
    border: 1px solid #ccc;
    position: absolute;
    bottom: 200px;

    .title {
      font-size: 20px;
      margin-bottom: 40px;
      // font-weight: bold;
      letter-spacing: 2px;
      text-align: center;
    }

    .loginInput {
      height: 50px;
      border-radius: 0;
      margin-bottom: 5px;
    }

    .code {
      cursor: pointer;
      width: 70px;
      text-align: center;
    }

    .formItem {
      // display: flex;
      font-size: 12px;

      .info {
        line-height: 24px;

        .agreement {
          color: #156197;
        }
      }

      .loginBtn {
        width: 100%;
        height: 40px;
        margin-top: 30px;
      }

      .changeTypeBtn {
        text-align: center;
        font-size: 14px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}

::v-deep .el-select__wrapper {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
}

::v-deep .el-select__wrapper:hover {
  box-shadow: none;
}

::v-deep .el-select__selected-item {
  color: #fff;
}

.languageFill:not([stroke]) {
  fill: rgb(255, 255, 255);
  position: relative;
  top: 7px;
}

::v-deep .el-input-group__prepend {
  background-color: #fff;
}

::v-deep .el-input-group__append {
  background-color: #fff;
}

.userType {
  display: flex;
  justify-content: space-between;

  .item {
    width: 150px;
    height: 150px;
    border: 1px solid #cccccc98;
    text-align: center;

    .imgBox {
      height: 60px;
      margin: 30px auto 0 auto;

      img {
        height: 100%;
      }
    }

    p {
      margin-top: 10px;
    }

    &:last-child {
      p {
        margin-top: 12px;
      }
    }
  }
}
</style>
